<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="content-type" content="text/html;charset=utf8"/>
    <meta id="viewport" name="viewport"
          content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;"/>
    <title></title>


    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">


    <style type="text/css">
        body,
        p,
        ul,
        li,
        h1,
        h2,
        form,
        input {
            margin: 0;
            padding: 0;
        }

        h1,
        h2 {
            font-size: 100%;
        }

        ul {
            list-style: none;
        }

        body {
            -webkit-user-select: none;
            -webkit-text-size-adjust: none;
            font-family: Helvetica;
            background: #ECECEC;
        }

        html,
        body {
            height: 100%;
        }

        a,
        button,
        input,
        img {
            -webkit-touch-callout: none;
            outline: none;
        }

        a {
            text-decoration: none;
        }


        .hide {
            display: none !important;
        }

        .cf:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        a[class*="btn"] {
            display: block;
            height: 42px;
            line-height: 42px;
            color: #FFFFFF;
            text-align: center;
            border-radius: 5px;
        }

        .btn-blue {
            background: #3D87C3;
            border: 1px solid #1C5E93;
        }

        .btn-green {
            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #43C750), color-stop(1, #31AB40));
            border: 1px solid #2E993C;
            box-shadow: 0 1px 0 0 #69D273 inset;
        }

        .charge {
            font-family: Helvetica;
            padding-bottom: 10px;
            -webkit-user-select: none;
        }

        .charge h1 {
            height: 44px;
            line-height: 44px;
            color: #FFFFFF;
            background: #3D87C3;
            text-align: center;
            font-size: 20px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        .charge h2 {
            font-size: 14px;
            color: #777777;
            margin: 5px 0;
            text-align: center;
        }

        .charge .content {
            padding: 10px 12px;
        }

        .charge .select li {
            position: relative;
            display: block;
            float: left;
            width: 100%;
            margin-right: 2%;
            height: 150px;
            line-height: 150px;
            text-align: center;
            border: 1px solid #BBBBBB;
            color: #666666;
            font-size: 16px;
            margin-bottom: 5px;
            border-radius: 3px;
            background-color: #FFFFFF;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            overflow: hidden;
        }

        .charge .price {
            border-bottom: 1px dashed #C9C9C9;
            padding: 10px 10px 15px;
            margin-bottom: 20px;
            color: #666666;
            font-size: 12px;
        }

        .charge .price strong {
            font-weight: normal;
            color: #EE6209;
            font-size: 26px;
            font-family: Helvetica;
        }

        .charge .showaddr {
            border: 1px dashed #C9C9C9;
            padding: 10px 10px 15px;
            margin-bottom: 20px;
            color: #666666;
            font-size: 12px;
            text-align: center;
        }

        .charge .showaddr strong {
            font-weight: normal;
            color: #9900FF;
            font-size: 26px;
            font-family: Helvetica;
        }

        .charge .copy-right {
            margin: 5px 0;
            font-size: 12px;
            color: #848484;
            text-align: center;
        }


        .charge .selectImg li {
            position: relative;
            display: block;
            float: left;
            width: 100%;
            margin-right: 2%;
            text-align: center;
            border: 1px solid #BBBBBB;
            color: #666666;
            font-size: 16px;
            margin-bottom: 5px;
            border-radius: 3px;
            background-color: #FFFFFF;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            overflow: hidden;
        }
    </style>
</head>

<body>


<article class="charge">
    <h1>微信支付购买</h1>
    <section class="content">
        <h2>商品：会员服务。</h2>
        <p class="copy-right">亲，此商品不提供退款和发货服务哦</p>
        <div class="price">微信价：<strong>￥[[${order.moneyStr}]]元</strong></div>
        <!--            <h2 style="color:#1aad19"> 订单剩余时间 / 到期后请勿支付</h2>-->
        <a href="javascript:" id="minute_show" class="weui-btn weui-btn_primary">
            倒计时：[[${timeExpire}]]分0秒
        </a>
        <ul class="selectImg cf">
            <li><img id="codeUrl" th:src="@{'http://qr.liantu.com/api.php?text='+${result.codeUrl} }"/></li>
            <li style="line-height:0"><img src="/img/sm.png"/></li>
        </ul>

        <input type="hidden" th:value="${order.orderId}" id="orderId"/>
        <input type="hidden" th:value="${timeExpire}" id="timeExpire"/>
        <input type="hidden" th:value="${callbackUrl}" id="callbackUrl"/>
        <input type="hidden" th:value="${order.tradeType}" id="tradeType"/>


    </section>
</article>
</body>
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script type="text/javascript" src="/js/zepto.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>

<script type="text/javascript">
    $(function () {
        function onBridgeReady() {
            WeixinJSBridge.call('hideOptionMenu');
        }

        if (typeof WeixinJSBridge == "undefined") {
            if (document.addEventListener) {
                document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
            } else if (document.attachEvent) {
                document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
            }
        } else {
            onBridgeReady();
        }
    });

    var timeTask = setInterval(function () {
        callFunction();
    }, 2000);
    var timeExpire = parseInt($("#timeExpire").val());
    //秒
    var ge_time = timeExpire * 60;
    var intDiff = parseInt(ge_time);//倒计时总秒数量

    function CountDown() {
        if (intDiff >= 0) {
            hours = Math.floor(intDiff / 3600);
            minutes = Math.floor((intDiff - hours * 3600) / 60);
            seconds = Math.floor(intDiff % 60);
            let text = '倒计时：' + minutes + '分' + seconds + '秒';
            $("#minute_show").text(text);
            intDiff--;
            ge_time = intDiff;
        } else {
            $('#codeUrl').attr('src', '/img/weixin.jpg');
            clearInterval(timeTask);
            $("#minute_show").text("重新支付");
            $("#minute_show").bind('click', function () {
                window.location.reload();
            });
        }
    }

    timer = setInterval("CountDown()", 1000);

    function callFunction() {

        $.ajax({
            type: "post",
            url: "/pay/queryOrder",
            data: {
                "orderId": $("#orderId").val(),
                "tradeType": $("#tradeType").val()
            },
            success: function (r) {
                if (r.code === 0) {
                    var rep = r.data;
                    //未支付
                    if (rep.status === 0 || rep.status === 2) {
                        //已支付
                    } else if (rep.status === 1) {
                        clearInterval(timeTask);
                        window.location.href = $("#callbackUrl").val()
                    }
                } else {

                }
            }
        });
    }
</script>

</html>